// 通用表格分页
<template>
    <div class="table-page">
        <!-- 搜索 -->
        <div class="search">
            <slot name="search"></slot>
        </div>

        <!-- 按钮列表 -->
        <div v-if="showBtnList" class="btn-list">
            <slot name="btnList"></slot>
        </div>

        <!-- 表单 -->
        <div class="content">
            <el-table
                ref="table"
                border
                tooltip-effect="dark"
                empty-text="暂无数据"
                style="width: 100%"
                :data="datas"
                @select="handleSelect"
                @select-all="handleSelectAll"
            >
                <el-table-column
                    v-if="columnHead"
                    v-bind="columnHead"
                ></el-table-column>

                <el-table-column
                    v-for="(column, columnIdx) in columnLabels"
                    :key="columnIdx"
                    v-bind="column"
                >
                    <template slot-scope="scope">
                        <span v-if="column.render">{{ column.render(scope.$index, scope.row) }}</span>
                        <span v-else>{{ scope.row[column.prop] }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    v-for="column in columnOptions"
                    :key="column.id"
                    v-bind="column"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-for="(option, optionIdx) in column.options"
                            :key="optionIdx"
                            :type="option.type"
                            :size="option.size || 'mini'"
                            @click="handleButtonClick(option.method, scope.$index, scope.row)"
                        >{{ option.label }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页-->
        <div class="the-page">
            <el-pagination
                :current-page="query.currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="query.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
export default {
    name: 'tablePage',
    props: {
        query: {
            require: true,
            type: Object
        },
        columns: {
            require: true,
            type: Array
        },
        datas: {
            require: true,
            type: Array
        },
        // 获取数据的函数，返回一个promise
        getDatas: {
            require: true,
            type: Function
        },
        showBtnList: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {

        }
    },
    computed: {
        pageSizes () {
            return this.query.pageSizes || [20, 40, 60, 80, 100]
        },
        pageSize () {
            return this.pageSizes[0]
        },
        columnHead () {
            if (this.columns[0].type) return this.columns[0]
            else ''
        },
        columnLabels () {
            return this.columns.filter(item => item.prop || item.render)
        },
        columnOptions () {
            return this.columns.filter(item => item.options)
        }
    },
    methods: {
        handleSearch (page) {
            this.getDatas(this.query.where)
                .then(res => {
                    if (res.code === 10000) {
                        this.$emit('update:datas', res.data.items)
                        // this.billData = res.data.items
                        this.query.currentPage = page || 1
                        this.query.total = res.total
                    }
                })
                .catch(err => console.error(err))
        },

        // 用于多选表格，选中某行
        handleSelect (selection, row) {
            this.$emit('handleSelect', selection)
        },
        // 用于多选表格，全选
        handleSelectAll (selection) {
            this.$emit('handleSelect', selection)
        },
        // 用于多选表格，清空用户的选择
        clearSelection () {
            this.$refs.table.clearSelection()
        },
        handleButtonClick (method, index, row) {
            this.$parent[method](index, row)
        },

        // 分页
        handleSizeChange (size) {
            console.log(`每页 ${size} 条`)
            this.query.pageSize = size
        },
        handleCurrentChange (page) {
            console.log(`当前页: ${page}`)
            this.query.currentPage = page
        }
    }
}
</script>

<style lang="scss" scoped>
.table-page {
    .search {
        min-width: 1220px;
    }

    .btn-list {
        margin-bottom: 18px;
    }
}
</style>